/**
 * 动态等待模块控制器
 * @class
 */
class LoadingModule {
    constructor(options = {}) {
        // 默认配置
        this.config = {
            container: document.body,
            text: '加载中...',
            spinnerColor: '#3498db',
            zIndex: 9999,
            ...options
        };

        // 创建DOM元素
        this.loadingEl = this._createLoadingElement();
        this._appendToContainer();

        // 初始状态
        this.isVisible = false;
    }

    /**
     * 创建加载元素
     * @private
     */
    _createLoadingElement() {
        const loadingEl = document.createElement('div');
        loadingEl.className = 'dynamic-loading-module';
        loadingEl.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      display: none;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: ${this.config.zIndex};
      transition: opacity 0.3s;
    `;

        // 添加旋转动画
        const spinner = document.createElement('div');
        spinner.className = 'loading-spinner';
        spinner.style.cssText = `
      width: 50px;
      height: 50px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid ${this.config.spinnerColor};
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 15px;
    `;

        // 添加文字
        const textEl = document.createElement('div');
        textEl.className = 'loading-text';
        textEl.textContent = this.config.text;
        textEl.style.color = '#fff';

        loadingEl.appendChild(spinner);
        loadingEl.appendChild(textEl);

        // 添加CSS动画
        this._injectCSSAnimation();

        return loadingEl;
    }

    /**
     * 注入CSS动画
     * @private
     */
    _injectCSSAnimation() {
        const style = document.createElement('style');
        style.textContent = `
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    `;
        document.head.appendChild(style);
    }

    /**
     * 添加到容器
     * @private
     */
    _appendToContainer() {
        this.config.container.appendChild(this.loadingEl);
    }

    /**
     * 显示等待模块
     */
    show() {
        if (this.isVisible) return;

        console.log("执行show()，当前元素状态：", {
            display: this.loadingEl.style.display,
            opacity: this.loadingEl.style.opacity,
            parent: this.loadingEl.parentElement
        });

        // 强制重绘前确保元素可见
        this.loadingEl.style.display = 'flex';
        this.loadingEl.style.opacity = '0'; // 初始透明
        // 使用双重 requestAnimationFrame 确保渲染
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                this.loadingEl.style.opacity = '1';
                console.log("透明度动画已触发");
            });
        });
        setInterval(()=>{
            console.log(1)
        },1000)
        this.isVisible = true;
    }

    /**
     * 隐藏等待模块
     */
    hide() {
        if (!this.isVisible) return;

        // 监听过渡结束事件
        const onTransitionEnd = () => {
            this.loadingEl.style.display = 'none';
            this.loadingEl.removeEventListener('transitionend', onTransitionEnd);
            console.log("隐藏完成");
        };

        this.loadingEl.addEventListener('transitionend', onTransitionEnd);
        this.loadingEl.style.opacity = '0';
        this.isVisible = false;
    }

    /**
     * 切换显示状态
     * @param {boolean} state - true显示/false隐藏
     */
    toggle(state) {
        state ? this.show() : this.hide();
    }

    /**
     * 更新提示文本
     * @param {string} text - 新提示文本
     */
    updateText(text) {
        const textEl = this.loadingEl.querySelector('.loading-text');
        if (textEl) textEl.textContent = text;
    }
}